<template>
  <div class="announcement-management">
    <div class="page-header">
      <h1>公告管理</h1>
      <p>管理医院公告信息</p>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :model="searchForm" inline>
        <el-form-item label="关键词">
          <el-input
            v-model="searchForm.keyword"
            placeholder="公告标题、内容"
            clearable
            @clear="handleSearch"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="公告类型">
          <el-select v-model="searchForm.type" filterable clearable placeholder="请选择类型">
            <el-option label="全部" value="" />
            <el-option label="系统公告" value="system" />
            <el-option label="科室通知" value="department" />
            <el-option label="紧急通知" value="emergency" />
            <el-option label="维护通知" value="maintenance" />
            <el-option label="政策通知" value="policy" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status"  filterable clearable placeholder="请选择状态" >
            <el-option label="全部" value="" />
            <el-option label="草稿" :value="0" />
            <el-option label="已发布" :value="1" />
            <el-option label="已撤回" :value="2" />
            <el-option label="已过期" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="searchForm.priority"  filterable clearable placeholder="请选择优先级" >
            <el-option label="全部" value="" />
            <el-option label="低" value="low" />
            <el-option label="普通" value="normal" />
            <el-option label="高" value="high" />
            <el-option label="紧急" value="urgent" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>
        发布公告
      </el-button>
      <el-button 
        type="danger" 
        :disabled="selectedRows.length === 0"
        @click="handleBatchDelete"
      >
        <el-icon><Delete /></el-icon>
        批量删除
      </el-button>
      <el-button 
        type="warning" 
        :disabled="selectedRows.length === 0"
        @click="handleBatchWithdraw"
      >
        <el-icon><Warning /></el-icon>
        批量撤回
      </el-button>
    </div>

    <!-- 公告列表 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="公告标题" min-width="200" show-overflow-tooltip>
        <template #default="{ row }">
          <div class="title-cell">
            <el-icon v-if="row.isTop === 1" color="#f56c6c" style="margin-right: 4px">
              <Top />
            </el-icon>
            <span>{{ row.title }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="120">
        <template #default="{ row }">
          <el-tag :type="getTypeTagType(row.type)">
            {{ getTypeText(row.type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="priority" label="优先级" width="100">
        <template #default="{ row }">
          <el-tag :type="getPriorityTagType(row.priority)">
            {{ getPriorityText(row.priority) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="publisher" label="发布人" width="120" />
      <el-table-column prop="publishTime" label="发布时间" width="160">
        <template #default="{ row }">
          {{ formatDateTime(row.publishTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="expiryTime" label="过期时间" width="160">
        <template #default="{ row }">
          {{ formatDateTime(row.expiryTime) }}
        </template>
      </el-table-column>
      <el-table-column label="阅读情况" width="120">
        <template #default="{ row }">
          <div class="read-stats">
            <span>{{ row.readCount || 0 }}/{{ row.viewCount || 0 }}</span>
            <el-progress
              :percentage="getReadRate(row)"
              :stroke-width="4"
              :show-text="false"
              style="margin-top: 4px"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="400" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleView(row)">
            <el-icon><View /></el-icon>
            查看
          </el-button>
          <el-button type="success" size="small" @click="handleEdit(row)">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button
            v-if="row.isTop === 0"
            type="warning"
            size="small"
            @click="handleTop(row)"
          >
            <el-icon><Top /></el-icon>
            置顶
          </el-button>
          <el-button
            v-else
            type="info"
            size="small"
            @click="handleCancelTop(row)"
          >
            取消置顶
          </el-button>
          <el-button
            v-if="row.status === 1"
            type="danger"
            size="small"
            @click="handleWithdraw(row)"
          >
            <el-icon><Warning /></el-icon>
            撤回
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row)"
          >
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="pagination.page"
        :page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      :before-close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item label="公告类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
            <el-option label="系统公告" value="system" />
            <el-option label="科室通知" value="department" />
            <el-option label="紧急通知" value="emergency" />
            <el-option label="维护通知" value="maintenance" />
            <el-option label="政策通知" value="policy" />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="form.priority" placeholder="请选择优先级" style="width: 100%">
            <el-option label="低" value="low" />
            <el-option label="普通" value="normal" />
            <el-option label="高" value="high" />
            <el-option label="紧急" value="urgent" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标受众" prop="targetAudience">
          <el-checkbox-group v-model="form.targetAudience">
            <el-checkbox label="doctor">医生</el-checkbox>
            <el-checkbox label="admin">管理员</el-checkbox>
            <el-checkbox label="patient">患者</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker
            v-model="form.publishTime"
            type="datetime"
            placeholder="选择发布时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="过期时间" prop="expiryTime">
          <el-date-picker
            v-model="form.expiryTime"
            type="datetime"
            placeholder="选择过期时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="8"
            placeholder="请输入公告内容"
          />
        </el-form-item>
        <el-form-item label="其他设置">
          <el-checkbox v-model="form.isTop" :true-label="1" :false-label="0">置顶显示</el-checkbox>
          <el-checkbox v-model="form.allowComment" :true-label="1" :false-label="0">允许评论</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="info" @click="handleSaveDraft" :loading="submitting">
            保存草稿
          </el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            立即发布
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="公告详情"
      width="700px"
    >
      <div v-if="selectedAnnouncement" class="announcement-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="公告标题" :span="2">
            <div class="title-with-top">
              <el-icon v-if="selectedAnnouncement.isTop === 1" color="#f56c6c" style="margin-right: 4px">
                <Top />
              </el-icon>
              {{ selectedAnnouncement.title }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="公告类型">
            <el-tag :type="getTypeTagType(selectedAnnouncement.type)">
              {{ getTypeText(selectedAnnouncement.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="getPriorityTagType(selectedAnnouncement.priority)">
              {{ getPriorityText(selectedAnnouncement.priority) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTagType(selectedAnnouncement.status)">
              {{ getStatusText(selectedAnnouncement.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="发布人">
            {{ selectedAnnouncement.publisher }}
          </el-descriptions-item>
          <el-descriptions-item label="发布时间">
            {{ formatDateTime(selectedAnnouncement.publishTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="过期时间">
            {{ formatDateTime(selectedAnnouncement.expiryTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="阅读统计">
            {{ selectedAnnouncement.readCount || 0 }} / {{ selectedAnnouncement.viewCount || 0 }}
            ({{ getReadRate(selectedAnnouncement) }}%)
          </el-descriptions-item>
          <el-descriptions-item label="目标受众">
            {{ getTargetAudienceText(selectedAnnouncement.targetAudience) }}
          </el-descriptions-item>
          <el-descriptions-item label="公告内容" :span="2">
            <div class="content-preview">
              {{ selectedAnnouncement.content }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleViewStatistics">查看统计</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Refresh, View, Edit, Delete, Warning, Top, Bell } from '@element-plus/icons-vue'
import { 
  getAnnouncementList, 
  createAnnouncement, 
  updateAnnouncement, 
  deleteAnnouncement,
  withdrawAnnouncement,
  topAnnouncement,
  batchOperateAnnouncements
} from '@/api/admin'

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const tableData = ref([])
const selectedRows = ref([])
const dialogVisible = ref(false)
const viewDialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref()
const selectedAnnouncement = ref(null)

// 搜索表单
const searchForm = reactive({
  keyword: '',
  type: '',
  status: '',
  priority: ''
})

// 分页数据
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
})

// 表单数据
const form = reactive({
  id: null,
  title: '',
  content: '',
  type: 'system',
  priority: 'normal',
  targetAudience: ['doctor'],
  publishTime: null,
  expiryTime: null,
  isTop: 0,
  allowComment: 0
})

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请输入公告标题', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入公告内容', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择公告类型', trigger: 'change' }
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ],
  targetAudience: [
    { required: true, message: '请选择目标受众', trigger: 'change' }
  ]
}

// 页面加载时获取数据
onMounted(() => {
  fetchAnnouncements()
})

// 获取公告列表
const fetchAnnouncements = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      size: pagination.size,
      ...searchForm
    }
    
    // 过滤空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key]
      }
    })

    const response = await getAnnouncementList(params)
    
    if (response.code === 200) {
      tableData.value = response.data.list || []
      pagination.total = response.data.total || 0
    } else {
      ElMessage.error(response.message || '获取公告列表失败')
    }
  } catch (error) {
    console.error('获取公告列表失败:', error)
    ElMessage.error('获取公告列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  fetchAnnouncements()
}

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    keyword: '',
    type: '',
    status: '',
    priority: ''
  })
  pagination.page = 1
  fetchAnnouncements()
}

// 分页大小改变
const handleSizeChange = (size) => {
  pagination.size = size
  pagination.page = 1
  fetchAnnouncements()
}

// 当前页改变
const handleCurrentChange = (page) => {
  pagination.page = page
  fetchAnnouncements()
}

// 选择行改变
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 添加公告
const handleAdd = () => {
  dialogTitle.value = '发布公告'
  resetForm()
  dialogVisible.value = true
}

// 编辑公告
const handleEdit = (row) => {
  dialogTitle.value = '编辑公告'
  Object.assign(form, { 
    ...row,
    publishTime: row.publishTime ? new Date(row.publishTime) : null,
    expiryTime: row.expiryTime ? new Date(row.expiryTime) : null,
    isTop: row.isTop ? 1 : 0,
    allowComment: row.allowComment ? 1 : 0
  })
  dialogVisible.value = true
}

// 查看详情
const handleView = (row) => {
  selectedAnnouncement.value = row
  viewDialogVisible.value = true
}

// 置顶公告
const handleTop = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要置顶公告"${row.title}"吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const response = await topAnnouncement(row.id, { isTop: 1 })

    if (response.code === 200) {
      ElMessage.success('置顶成功')
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || '置顶失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('置顶失败:', error)
      ElMessage.error('置顶失败')
    }
  }
}

// 取消置顶
const handleCancelTop = async (row) => {
  try {
    const response = await topAnnouncement(row.id, { isTop: 0 })

    if (response.code === 200) {
      ElMessage.success('取消置顶成功')
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || '取消置顶失败')
    }
  } catch (error) {
    console.error('取消置顶失败:', error)
    ElMessage.error('取消置顶失败')
  }
}

// 撤回公告
const handleWithdraw = async (row) => {
  try {
    const { value: reason } = await ElMessageBox.prompt(
      `确定要撤回公告"${row.title}"吗？`,
      '撤回公告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入撤回原因'
      }
    )

    const response = await withdrawAnnouncement(row.id, { 
      reason: reason || '管理员撤回',
      notifyUsers: true 
    })

    if (response.code === 200) {
      ElMessage.success('撤回成功')
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || '撤回失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('撤回失败:', error)
      ElMessage.error('撤回失败')
    }
  }
}

// 删除公告
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除公告"${row.title}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const response = await deleteAnnouncement(row.id)

    if (response.code === 200) {
      ElMessage.success('删除成功')
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 批量删除
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedRows.value.length} 条公告吗？`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const announcementIds = selectedRows.value.map(row => row.id)
    const response = await batchOperateAnnouncements({
      announcementIds,
      action: 'delete',
      reason: '批量删除'
    })

    if (response.code === 200) {
      ElMessage.success('批量删除成功')
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 批量撤回
const handleBatchWithdraw = async () => {
  try {
    const { value: reason } = await ElMessageBox.prompt(
      `确定要撤回选中的 ${selectedRows.value.length} 条公告吗？`,
      '批量撤回公告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入撤回原因'
      }
    )

    const announcementIds = selectedRows.value.map(row => row.id)
    const response = await batchOperateAnnouncements({
      announcementIds,
      action: 'withdraw',
      reason: reason || '管理员批量撤回'
    })

    if (response.code === 200) {
      ElMessage.success('批量撤回成功')
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || '批量撤回失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量撤回失败:', error)
      ElMessage.error('批量撤回失败')
    }
  }
}

// 保存草稿
const handleSaveDraft = async () => {
  try {
    await formRef.value.validate()
    
    submitting.value = true
    
    const isEdit = !!form.id
    const requestData = {
      ...form,
      status: 0 // 草稿状态
    }
    
    const response = isEdit ? 
      await updateAnnouncement(requestData) : 
      await createAnnouncement(requestData)
    
    if (response.code === 200) {
      ElMessage.success('保存草稿成功')
      dialogVisible.value = false
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || '保存草稿失败')
    }
  } catch (error) {
    console.error('保存草稿失败:', error)
    ElMessage.error('保存草稿失败')
  } finally {
    submitting.value = false
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    
    submitting.value = true
    
    const isEdit = !!form.id
    const requestData = {
      ...form,
      status: 1 // 已发布状态
    }
    
    const response = isEdit ? 
      await updateAnnouncement(requestData) : 
      await createAnnouncement(requestData)
    
    if (response.code === 200) {
      ElMessage.success(isEdit ? '更新成功' : '发布成功')
      dialogVisible.value = false
      fetchAnnouncements()
    } else {
      ElMessage.error(response.message || (isEdit ? '更新失败' : '发布失败'))
    }
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败')
  } finally {
    submitting.value = false
  }
}

// 查看统计
const handleViewStatistics = () => {
  // 这里可以跳转到统计页面或打开统计对话框
  ElMessage.info('统计功能待开发')
}

// 关闭对话框
const handleDialogClose = () => {
  dialogVisible.value = false
  resetForm()
}

// 重置表单
const resetForm = () => {
  Object.assign(form, {
    id: null,
    title: '',
    content: '',
    type: 'system',
    priority: 'normal',
    targetAudience: ['doctor'],
    publishTime: null,
    expiryTime: null,
    isTop: 0,
    allowComment: 0
  })
  
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

// 获取类型文本
const getTypeText = (type) => {
  const typeMap = {
    system: '系统公告',
    department: '科室通知',
    emergency: '紧急通知',
    maintenance: '维护通知',
    policy: '政策通知'
  }
  return typeMap[type] || '未知'
}

// 获取类型标签类型
const getTypeTagType = (type) => {
  const typeMap = {
    system: 'primary',
    department: 'success',
    emergency: 'danger',
    maintenance: 'warning',
    policy: 'info'
  }
  return typeMap[type] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority) => {
  const priorityMap = {
    low: '低',
    normal: '普通',
    high: '高',
    urgent: '紧急'
  }
  return priorityMap[priority] || '普通'
}

// 获取优先级标签类型
const getPriorityTagType = (priority) => {
  const priorityMap = {
    low: 'info',
    normal: 'success',
    high: 'warning',
    urgent: 'danger'
  }
  return priorityMap[priority] || 'success'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '草稿',
    1: '已发布',
    2: '已撤回',
    3: '已过期'
  }
  return statusMap[status] || '未知'
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const statusMap = {
    0: 'info',
    1: 'success',
    2: 'warning',
    3: 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取目标受众文本
const getTargetAudienceText = (targetAudience) => {
  if (!targetAudience || !Array.isArray(targetAudience)) return '无'
  
  const audienceMap = {
    doctor: '医生',
    admin: '管理员',
    patient: '患者'
  }
  
  return targetAudience.map(audience => audienceMap[audience] || audience).join('、')
}

// 获取阅读率
const getReadRate = (row) => {
  if (!row.viewCount || row.viewCount === 0) return 0
  return Math.round((row.readCount / row.viewCount) * 100)
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}
</script>

<style scoped>
.announcement-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.search-bar {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.action-bar {
  margin-bottom: 20px;
}

.title-cell {
  display: flex;
  align-items: center;
}

.title-with-top {
  display: flex;
  align-items: center;
}

.read-stats {
  text-align: center;
  font-size: 12px;
  color: #606266;
}

.content-preview {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.6;
  color: #606266;
}

.announcement-detail {
  padding: 20px 0;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-form-item__label) {
  font-weight: 600;
}

:deep(.el-dialog__header) {
  background-color: #f5f7fa;
  padding: 20px 20px 10px;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-checkbox-group) {
  display: flex;
  gap: 16px;
}

:deep(.el-progress-bar__outer) {
  background-color: #f0f2f5;
}
</style> 